<template>
  <div class="danxuan">
    <!-- 学科 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*学科:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-select v-model="single.tianSubject" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p v-show="value1 && !single.tianSubject">请输入学科</p>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 题干 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*题干:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.tianName" placeholder="请输入内容"></el-input>
          <p v-show="input1 && !single.tianName">请输入题干</p>
        </div>
      </el-col>
    </el-row>
    <!-- 标答 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*标答:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.tianAnswer" placeholder="请输入内容"></el-input>
          <p v-show="radio1 && !single.tianAnswer">请输入标准答案</p>
        </div>
      </el-col>
    </el-row>
    <!-- 解析 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*解析:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.tianDesc" placeholder="请输入内容"></el-input>
        </div>
        <p v-show="answer1 && !single.tianDesc">请输入解析</p>
      </el-col>
    </el-row>
    <!-- 分数 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*分数:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-input-number
            v-model="single.tianScore"
            @change="handleChange"
            :min="1"
            :max="10"
          ></el-input-number>
        </div>
        <p v-show="!single.tianScore">请输入分数</p>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 难度 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*难度:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-rate v-model="single.tianDifficult"></el-rate>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <div class="but">
      <el-button type="primary" @click="see()">提交</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button type="success" @click="preview()">预览</el-button>
      <el-dialog title="题目" :visible.sync="centerDialogVisible" width="30%" center>
        <p>{{ single.tianName }}</p>
        <span class="da">{{ single.tianAnswer}}</span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { filllink } from "@/apis/shimengtong/Index";
import { demo } from "@/mixin/shimengtong/index.js";
export default {
  mixins: [demo],
  data() {
    return {
      single: {
        tianAnswer: "",//标答
        // tianClass: "",
        tianDesc: "",//解析
        tianDifficult: 0,//难度
        // tianId: 0,
        tianName: "",//题干
        tianScore: "",//得分
        tianSubject: "",//学科
      },
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    see() {
      if (!this.single.tianName) {
        this.input1 = true;
      }
      if (!this.single.tianSubject) {
        this.value1 = true;
      }
      if (!this.single.tianDesc) {
        this.answer1 = true;
      }
      if (!this.single.tianAnswer) {
        this.radio1 = true;
      }
      if (this.single.tianName && this.single.tianSubject && this.single.tianDesc && this.single.tianAnswer) {
        filllink(this.single).then((ok) => {
          console.log(ok);
                this.$message({
        message: "新增填空成功！",
        type: "success",
      });
        });
      }
    },
  },
};
</script>

<style scoped>
.danxuan {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 20px;
  font-weight: 600;
}

.grid-content {
  text-align: center;
  line-height: 40px;
}

.el-row {
  margin-top: 10px;
}

.el-col {
  margin-right: 10px;
}

.sel {
  text-align: center;
  line-height: 40px;
  margin-left: 50px;
}

.el-rate {
  margin-top: 10px;
}

.but {
  /* margin: 10px,5px,0,20px; */
  margin-top: 30px;
  margin-left: 120px;
}

p {
  height: 10px;
  font-size: 12px;

}
</style>
